<template>
    <div class="app-container order-list-index">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="100px"
        size="medium"
        class="ry_form"
      >
        <el-form-item v-if="YT_roles" label="服务商名称" prop="customerId">
          <el-select v-model="queryParams.customerId" filterable="filterable" remote="remote" clearable="clearable">
            <el-option v-for="item in wmsCustomerList" :key="item.customerName" :label="item.customerName" :value="item.id" />
          </el-select>
          </el-form-item>
        <el-form-item class="flex_one tr">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >{{ $t('common.search') }}</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >{{ $t('common.reset') }}</el-button
          >
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5"> </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
          :columns="columns"
        ></right-toolbar>
      </el-row>
      <!-- 列表 -->
      <TableComponents
        ref="tableRef"
        :url="'/wms/bmsFinance/serviceFinanceMainList'"
        :columns="columnsAry"
        :params="{ status: '', ...queryParams }"
        :req="{
          page: 0,
          size: 10,
        }"
        :methodType="'paramsPost'"
        :return-data="returnData"
      >
        <el-table-column slot="operation" :label="$t('common.operation')" width="120" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleShowNextLevel(scope.$index, scope.row)"
            >
              {{ $t('common.toDetail') }}
            </el-button>
          </template>
        </el-table-column>
      </TableComponents>
      <el-drawer
        title="财务单明细"
        :visible.sync="drawer"
        :before-close="handleClose"
        :size="'calc(100vw - 234px);'"
      >
        <BeforeFinancialOrderDetail ref="FinancialOrderDetailRef" @cancel="handleClose" />
        <!-- <FinancialOrderDetail ref="FinancialOrderDetailRef" /> -->
      </el-drawer>
    </div>
  </template>
  <script>
  // import BmsBillStatistics from "./bmsBillStatistics.vue";
  import dayjs from 'dayjs'
  import { customerServiceList, addCustomerService } from "@/api/wms/supplier";
  import FormComponents from "@/components/FormComponents/index.vue";
  import TableComponents from "@/components/Table/list.vue";
  import FinancialOrderDetail from "./financialOrderDetail.vue";
  import BeforeFinancialOrderDetail from './beforeFinancialOrderDetail.vue'
  
  export default {
    components: { FormComponents, TableComponents, FinancialOrderDetail, BeforeFinancialOrderDetail },
    props: [],
    data() {
      return {
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          customerId: null,
        },
        columns: [
          { key: 1, label: "服务供应商", visible: true },
          { key: 2, label: this.$t('fiance.total'), visible: true },
          { key: 3, label: this.$t('common.createTime'), visible: true },
          { key: 4, label: this.$t('common.operation'), visible: true },
        ],
        activeName: "",
        tabs: [{ name: this.$t('fiance.statement'), value: "" }],
        saveLoading: false,
        returnData(data) {
          return data.content.map((r) => {
            r.createTime = dayjs(r.createTime).format("YYYY-MM-DD HH:mm:ss");
            return r;
          });
        },
        columnsAry: [
          { prop: "payeeName", label: this.$t('fiance.payeeName') },
          { prop: "payerName", label: this.$t('fiance.payerName') },
          { prop: "amount", label: this.$t('fiance.total') },
          { prop: "payeeAmount", label: this.$t('fiance.receivable') },
          { prop: "payerAmount", label: this.$t('fiance.copeWith') },
          // { prop: "createTime", label: this.$t('common.createTime') },
          { label: this.$t('common.operation'), slot: "operation" },
        ],
        drawer: false,
        wmsCustomerList: [],
      };
    },
    computed: {
      YT_roles() {
        // 暂时判断roles为common不是服务供应商的未YT
        if(this.$store.state.user.roles[0] !== 'common') {
          return true
        }
      },
    },
    created() {
      this.getList();
      this.getCusList()
    },
    methods: {
      // 查询服务供应商
      getCusList() {
        const query = { pageNum: undefined, pageSize: undefined };
        const pageReq = { page: 0, size: 100000 };
        customerServiceList(query, pageReq).then((response) => {
          const { content } = response;
          this.wmsCustomerList = content;
        });
      },
      getList() {
        this.$nextTick(() => {
          this.$refs.tableRef.getList();
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      handleShowNextLevel(index, row) {
        this.drawer = true;
        this.$nextTick(() => {
          this.$refs.FinancialOrderDetailRef.open(row);
        });
      },
      handleClose() {
        this.drawer = false;
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  ::v-deep {
    .el-drawer__header {
      font-size: 18px
    }
  }
  </style>
  